﻿@model CarouselListModel
@using Nop.Plugin.Widgets.Carousel.Models;
@using Nop.Core;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework.UI;

@{
    var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
}


@if (Model.AvailableCarousels.Count > 0)
{
    <div class="product-grid" @(supportRtl ? Html.Raw("style=\"direction:ltr;\"") : null)>
        @foreach (var carousel in Model.AvailableCarousels)
        {
            <script type="text/javascript">
                jQuery(document).ready(function ($) {
                    $('@(".carousel" + carousel.Id)').carousel({
                        visible: @carousel.NumberOfItems,
                        itemMinWidth: @carousel.ItemMinWidth,
                        itemMargin: @carousel.ItemMargin,
                        autoRotate: ('@carousel.IsAutoRotate'=='True')? @carousel.AutoRotate :undefined,
                    });
                    $('.crsl-items').on('initCarousel', function (event, defaults, obj) {
                        // Hide controls
                        $('.carousel-hidden-nev').find('.previous, .next').css({ opacity: 0 });
                        // Show controls on gallery hover
                        // #gallery-07 wraps .crsl-items and .crls-nav
                        // .stop() prevent queue
                        $('.carousel-hidden-nev').hover(function () {
                            $(this).find('.previous').css({ left: 0 }).stop(true, true).animate({ left: '20px', opacity: 1 });
                            $(this).find('.next').css({ right: 0 }).stop(true, true).animate({ right: '20px', opacity: 1 });
                        }, function () {
                            $(this).find('.previous').animate({ left: 0, opacity: 0 });
                            $(this).find('.next').animate({ right: 0, opacity: 0 });
                        });
                    });
                });
            </script>

            <div @(carousel.isHiddenNav ? Html.Raw("class=\"carousel-hidden-nev\"") : null)>
                <div id="@("carouselNav" + carousel.Id)" class="crsl-nav">
                    <a href="#" class="previous" @(carousel.isHiddenNav ? Html.Raw("style=\"opacity: 1; left: 20px;\"") : null)><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a href="#" class="next" @(carousel.isHiddenNav ? Html.Raw("style=\"opacity: 1; right: 20px;\"") : null)><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
                <div class="@("carousel" + carousel.Id) crsl-items" data-navigation="@("carouselNav" + carousel.Id)" style="width: 100%;">
                    <div class="crsl-wrap">
                        @foreach (var product in carousel.Products)
                        {
                            <section class="crsl-item" @(supportRtl ? Html.Raw("style=\"direction:rtl;\"") : null)>
                                <div class="item-box carousel-custom-class">
                                    @if (carousel.CustomProductBox)
                                    {
                                        @Html.Partial("~/Plugins/Widgets.Carousel/Views/_ProductBox.cshtml", product)
                                    }
                                    else
                                    {
                                        @Html.Partial("_ProductBox", product)
                                    }
                                    </div>
                                </section>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
}







